<template>
  <div class>
    <div
      v-if="showInfo"
      class="cesiumdialog"
      :style="{
        left: winPos[0] - getscalepxcnum(202) + 'px',
        bottom: winPos[3] + 'px',
        width: getscalepxc(410),
        height: getscalepxc(330),
      }"
    >
      <!-- 关闭图标 -->
      <i
        class="el-icon-close"
        :style="{
          position: 'absolute',
          right: getscalepxc(10),
          top: getscalepxc(10),
          fontSize: getscalepxc(12),
          pointerEvents: 'auto',
          cursor: 'pointer',
        }"
        @click="closebox()"
      ></i>
      <!-- name -->
      <div
        :style="{
          padding: getscalepxc(10),
          marginLeft: getscalepxc(5),
          fontSize: getscalepxc(14),
          width: 'fit-content',
          height: getscalepxc(30),
          fontWeight: 'bold',
        }"
        class="cardtitlebg"
      >
        {{ optionsdata.name }}
      </div>
      <!-- 数据展示 -->
      <div
        class="fwwsbcwh"
        :style="{
          fontSize: getscalepxc(12),
          height: getscalepxcnum(130 - 70) + 'px',
        }"
      >
        <div class="fcl" :style="{ padding: getpmtwo(5, 10), height: '100%' }">
          <div
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>供温(℃)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.gongwen
            }}</span>
          </div>
          <div
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>回温(℃)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.huiwen
            }}</span>
          </div>
        </div>
        <div class="fcl" :style="{ padding: getpmtwo(5, 10), height: '100%' }">
          <div
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>供压(MPa)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.gongya
            }}</span>
          </div>
          <div
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>回压(MPa)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.huiya
            }}</span>
          </div>
        </div>
        <div class="fcl" :style="{ padding: getpmtwo(5, 10), height: '100%' }">
          <div
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>流量(t/h)：&nbsp;&nbsp;</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.liuliang
            }}</span>
          </div>
          <div
            v-if="true"
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>热量({{ifsub ? 'K' : 'M'}}W)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.reliang
            }}</span>
          </div>
          <div
            v-if="false"
            :style="{
              backgroundSize: '100% 100%',
              padding: getpmtwo(5, 10),
              backgroundImage: getlabelurl('gongwen'),
            }"
          >
            <span>阀门开度：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }"
              >{{ optionsdata.famenkaidu }}%</span
            >
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div
        style="width: 100%; height: 60%; pointer-events: auto"
        v-if="ifchart"
      >
        <div :id="uniqueID" style="height: 100%; width: 100%"></div>
      </div>
      <div v-if="!ifchart" :style="{width: '100%', height: '100%',textAlign: 'center', padding: getpmtwo(100,0)}">数据为空</div>
    </div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";
import * as echarts from "echarts/dist/echarts";

import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "cardmsgzzn",
  mixins: [commonmixins],
  props: {
    diahtml: "",
    options: {},
  },
  components: {},
  data() {
    return {
      ifchart: true,
      ifsub: false,
      optionsdata: {
        name: "-",
        gongwen: "-",
        huiwen: "-",
        gongya: "-",
        huiya: "-",
        liuliang: "-",
        reliang: "-",
        famenkaidu: "-",
        chart: "",
      },
      winPos: [0, 0, 0, 0],
      showInfo: true,
      uniqueID: "",
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
    this.scalecom = 0.6;
  },
  watch: {
    showInfo: {
      handler: function (n, o) {
        this.$nextTick(function () {
          this.initchart();
        });
      },
    },
    winPos: {
      handler: function (n, o) {
        //判断位置与窗口偏移
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;

        let offwidth = n[0];
        let offheight = n[1];

        let reswidth = width - offwidth;
        let resheight = height - offheight;
        if (
          reswidth < 220 ||
          resheight < 20 ||
          reswidth > width ||
          resheight > height
        ) {
          this.showInfo = false;
        } else {
          this.showInfo = true;
        }
      },
    },
  },
  mounted() {
    this.$root._earth.sceneTree.root.children.push({
      ref: this.options.uid,
      czmObject: {
        name: "Pin1",
        xbsjType: "Pin",
        position: [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
        near: 300,
        show: false,
      },
    });

    this.$parent.pinarr.push(this.options.uid);
    let pin1 = this.$root._earth.sceneTree.$refs[this.options.uid].czmObject;
    pin1.position = [
      this.options.position.longitude,
      this.options.position.latitude,
      this.options.position.height,
    ];
    XE.MVVM.track(this, "winPos", pin1, "winPos");

    this.initdata();
    if (
      this.options["data"]["chartdata"].length == 1 &&
      this.options["data"]["chartdata"]["aligntime"] == null
    ) {
      this.ifchart = false
    } else {
      this.ifchart = true
      this.initchart();
    }
  },
  methods: {
    initdata() {
      if (this.options != {}) {
        this.optionsdata.name = this.options["data"]["name"];
        this.optionsdata.gongwen = this.options["data"]["gongwen"];
        this.optionsdata.huiwen = this.options["data"]["huiwen"];
        this.optionsdata.gongya = this.options["data"]["gongya"];
        this.optionsdata.huiya = this.options["data"]["huiya"];
        this.optionsdata.liuliang = this.options["data"]["liuliang"];
        this.optionsdata.reliang = this.options["data"]["reliang"];
        this.ifsub = false;
        if (this.options["type"] == "substation") {
          this.ifsub = true;
          this.optionsdata.famenkaidu = this.options["data"]["famenkaidu"];
        }
      }
    },
    // getfontunit(){
    //   return '#aaa'
    // },
    getlabelurl(type) {
      return `url(/configuration/3d/bgllv.png)`;
    },
    initchart() {
      /*******************************
         {
        "m_001p": 0.01,
        "aligntime": "2020-11-11 09:20:21",
        "m_002p": 0.01,
        "m_001t": 20.6,
        "m_002t": 20.8,
        "name": "百荣商贸城2区3号站",
        "pid": 39228,
        "type": "SubStation_m_history",
        "ppid": 39228
        },
       */

      let chartoptions = {
        backgroundColor: "#0000",
        color: ["#80FFCB", "#28C3F6", "#5E5CCC", "#FFD205"],
        legend: {
          show: "true",
          data: ["供温", "回温", "供压", "回压"],
          textStyle: {
            color: "#F5F5F5",
            fontSize: this.getscalepxcnum(10),
          },
          selected: {},
          icon:
            "path://M467.106909 581.073455l-107.636364-108.311273a55.645091 55.645091 0 1 0-78.94109 78.475636l148.154181 149.085091a55.458909 55.458909 0 0 0 40.680728 16.663273 55.389091 55.389091 0 0 0 39.982545-17.966546l278.039273-298.426181a55.645091 55.645091 0 1 0-81.454546-75.869091L467.130182 581.073455zM139.636364 0h744.727272a139.636364 139.636364 0 0 1 139.636364 139.636364v744.727272a139.636364 139.636364 0 0 1-139.636364 139.636364H139.636364a139.636364 139.636364 0 0 1-139.636364-139.636364V139.636364a139.636364 139.636364 0 0 1 139.636364-139.636364z",
          // right: 0
        },
        title: {
          // subtext: 'GB/日',
          // left: 'center',
          // top: '10px',
          // text: 'nameSpace Top5',
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          axisLabel: {
            // rotate: 45,
          },
          splitLine: { show: false },
          type: "category",
          // name: '时间',
          boundaryGap: false,
          data: [
            "0",
            "2",
            "4",
            "6",
            "8",
            "10",
            "12",
            "14",
            "16",
            "18",
            "20",
            "24",
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#F5F5F5",
              fontSize: this.getscalepxcnum(10),
            },
          },
        },
        yAxis: [
          {
            name: "℃",
            type: "value",
            splitLine: { show: false },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#F5F5F5",
                fontSize: this.getscalepxcnum(10),
              },
            },
          },
          {
            name: "MPa",
            type: "value",
            splitLine: { show: false },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#F5F5F5",
                fontSize: this.getscalepxcnum(10),
              },
            },
          },
        ],
        series: [
          {
            name: "供温",
            type: "line",
            yAxisIndex: 0,
            data: [
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
            ],
            smooth: true,
          },
          {
            name: "回温",
            type: "line",
            yAxisIndex: 0,
            data: [
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
            ],
            smooth: true,
          },
          {
            name: "供压",
            type: "line",
            yAxisIndex: 1,
            data: [
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
            ],
            smooth: true,
          },
          {
            name: "回压",
            type: "line",
            yAxisIndex: 1,
            data: [
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
            ],
            smooth: true,
          },
        ],
      };

      chartoptions.xAxis.data = [];
      chartoptions.series[0].data = [];
      chartoptions.series[1].data = [];
      chartoptions.series[2].data = [];
      chartoptions.series[3].data = [];

      this.options.data.chartdata.map((item) => {
        chartoptions.xAxis.data.push(item["aligntime"]);
        chartoptions.series[0].data.push(item["m_001t"]);
        chartoptions.series[1].data.push(item["m_002t"]);
        chartoptions.series[2].data.push(item["m_001p"]);
        chartoptions.series[3].data.push(item["m_002p"]);
      });

      var beijingchart = echarts.init(
        document.getElementById(this.uniqueID),
        "dark"
      );
      beijingchart.setOption(chartoptions);

      window.addEventListener("resize", () => {
        beijingchart.resize();
      });
    },
    closebox() {
      //删除pin数组
      // let pinarr = _.cloneDeep(this.$parent.pinarr);
      // pinarr.map((item, index) => {
      //   if (item == this.options.uid) {
      //     this.$parent.pinarr.splice(index, 1);
      //   }
      // });

      //删除_earth.children对象
      this.$root._earth.sceneTree.root.children.map((eactpin, index) => {
        if (eactpin.ref == this.options.uid) {
          this.$root._earth.sceneTree.root.children.splice(index, 1);
        }
      });

      //删除msgbox数组对应元素
      let msgboxarr = _.cloneDeep(this.$parent.dependlistArr.cardmsgzzn);
      msgboxarr.map((item, index) => {
        if (item.uid == this.options.uid) {
          this.$parent.dependlistArr.cardmsgzzn.splice(index, 1);
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.cardtitlebg {
  background-image: url("/configuration/3d/bgt.png");
  background-size: 100% 100%;
}
.cesiumdialog {
  // pointer-events: none;
  position: absolute;
  // width: 500px;
  // height: 400px;
  color: #aed2e2;
  background-image: url("/configuration/beijing/dialog.png");
  background-size: 100% 100%;
  background-color: #fff0;
  padding: 5px;
  border-radius: 5px;
  pointer-events: none;
  // cursor: pointer;
  // font-size: 18px;
  // font-size: 18px;
}
</style>